<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>折叠菜单</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        ul{list-style-type: none; padding: 0px;margin: 0px;}
        li{width: 100px;}
        ul.lanmu >li{background-color: blue;color: white;}
        ul.caidan >li{background-color: white;color: black;display: none;}
        .container{
            width: 400px;
            height: 600px;
        }
    </style>
</head>
<body>
<li>
    <ul class="lanmu">
        <li class="class1">栏目1
            <ul class="caidan">
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
    </ul>
</li>
<li>
        <li class="class1">栏目2
            <ul class="caidan">
                <li>菜单4</li>
                <li>菜单5</li>
                <li>菜单6</li>
    </ul>  
</li>
<li>
        <li class="class1">栏目3
            <ul class="caidan">
                <li>菜单7</li>
                <li>菜单8</li>
                <li>菜单9</li>
    </ul>
</li>
    </ul>
<div class="container">
    <div class="source">
        <select name="" id="leftselect" multiple="multiple">
            <option value="0">文件</option>
            <option value="1">编辑</option>
            <option value="2">选择</option>
            <option value="3">查看</option>
            <option value="4">转到</option>
        </select>
        <button class="movetorightone">&gt;</button>
        <button class="movetorightall">&gt;&gt;</button>
        <button class="movetoleftone">&lt;</button>
        <button class="movetoleftall">&lt;&lt;</button>
        <select name="" id="rightselect" multiple="multiple"></select>
    </div>
</div>
    <script>
        $('.movetorightone').on('click',function(){
            $('#leftselect option:selected').appendTo('#rightselect');
        });
        $('ul.lanmu >li').click(function(){
            $(this).siblings().children().children().css('display','none');
            $(this).children().children().css('display','block');
        });
    </script>
</body>
</html>